<template>
  <div class="section com-route">
    <h3 class="section-title text-center">{{title}}相关航线</h3>
    <div class="wrapper wrapper-fixed">
      <ul class="route-list">
        <li class="item" v-for="item in routes">
          <nuxt-link :to="/route/+item.id" class="item-img img-link zoom-box"><img :src="item.route_icon" alt=""></nuxt-link>
          <div class="text-area">
            <div class="text-area-inner">
              <h3 class="title"><nuxt-link :to="/route/+item.id">{{item.title}}</nuxt-link></h3>
              <div class="describe" v-html="item.content"></div>
              <div class="tags">
                <p class="tag tag-clock">{{item.days}}</p>
                <p class="tag tag-address">{{item.departure}}起航 — 抵达{{item.destination}}</p>
              </div>
              <p class="text-right link-box"><nuxt-link :to="/route/+item.id" class="btn-icon-o"><i class="fa fa-angle-right"></i></nuxt-link></p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default{
  props: {
    title: String,
    routes: Array
  }
}
</script>
<style lang="less" scoped>
@import "~assets/css/variable.less";
@import "~assets/css/mixins.less";
.section-title{
  font-size:36px;
  color:#000;
  font-weight:normal;
  margin-bottom:1em;
  @media screen and (max-width:1270px){font-size:32px;}
  @media screen and (max-width:1024px){font-size:30px;}
  @media screen and (max-width:768px){font-size:28px;}
}
.com-route{
  padding:66px 0 100px 0;
  .route-list{
    .item{
      @itemHeight:350px;
      width:100%;
      padding-left:370px;
      margin-bottom:84px;
      position:relative;
      height:@itemHeight;
      .item-img{
        max-width:500px;
        display:block;
        position:absolute;
        top:-25px;
        left:0;
      }
      .text-area{
        height:@itemHeight;
        padding-left:130px;
        background-color:#fff;
          box-shadow: 0px 5px 21.6px 2.4px rgba(46, 46, 46, 0.1);
        .text-area-inner{
          padding:36px 50px;
        }
      }
      .title{
        font-size:32px;
        line-height:1;
        margin-bottom:0.7em;
        color:#181716;
        font-weight:normal;
        .text-overflow();
      }
      .describe{
        font-size:16px;
        line-height:1.75em;
        color:#666;
        .text-overflow-lines(3, 1.75em);
      }
      .tags{
        padding:1.5em 0;
        .tag{&:last-child{margin-bottom:0;}}
      }
      .tag{
        @lineHeight:24px;
        color:#181716;
        font-size:16px;
        padding-left:2em;
        position:relative;
        line-height:@lineHeight;
        margin-bottom:0.5em;
        &::before{
          content:'\e69d';
          font-family:"iconfont" !important;
          font-size:@lineHeight;
          position:absolute;
          top:50%;
          left:0;
          margin-top:-0.5em;
        }
        &.tag-clock{
          &::before{
            content:'\e69d';
          }
        }
        &.tag-address{
          &::before{
            content:'\e65f';
          }
        }
      }
      .route-price{
        color:#666;
        font-size:16px;
        line-height:1;
        .price{font-size:40px; position:relative; padding-left:16px;}
        .small{font-size:16px; position:absolute; top:0.5em; left:0;}
      }
    }
  }
  @media screen and (max-width:1270px){
    .route-list{
      .item{
        @itemHeight:300px;
        width:100%;
        padding-left:330px;
        margin-bottom:70px;
        height:@itemHeight;
        .item-img{
          width:430px;
        }
        .text-area{
          height:@itemHeight;
          padding-left:100px;
          .text-area-inner{
            padding:36px 50px;
          }
        }
        .title{
          font-size:30px;
          margin-bottom:0.5em;
        }
        .describe{
          font-size:14px;
          .text-overflow-lines(2, 1.75em);
        }
        .tags{
          padding:1.3em 0;
        }
        .tag{
          @lineHeight:20px;
          font-size:14px;
          line-height:@lineHeight;
          &::before{
            font-size:@lineHeight;
          }
        }
        .route-price{
          font-size:14px;
          .price{font-size:38px;padding-left:14px;}
          .small{font-size:14px;}
        }
      }
    }
  }
  @media screen and (max-width:1024px){
    .route-list{
      .item{
        width:100%;
        padding-left:250px;
        margin-bottom:50px;
        height:auto;
        .item-img{
          width:330px;
          top:-20px;
        }
        .text-area{
          height:auto;
          padding-left:80px;
          .text-area-inner{
            padding:30px 40px;
          }
        }
        .title{font-size:28px;}
        .describe{
          .text-overflow-lines(2, 1.75em);
        }
        .tags{
          padding:1em 0;
        }
        .route-price{
          .price{font-size:30px;}
          .small{font-size:14px;}
        }
      }
    }
  }
  @media screen and (max-width:768px){
    padding:66*@rpx 0 100*@rpx 0;
    .route-list{
      .item{
        width:100%;
        padding-left:0;
        margin-bottom:50*@rpx;
        .item-img{
          position:static;
          width:100%;
          max-width:none;
          img{width:100%;}
        }
        .text-area{
          padding-left:0;
          padding-top:60px;
          margin-top:-60px; 
          .text-area-inner{
            padding:36*@rpx 40*@rpx;
          }
        }
        .title{font-size:22px;}
        .describe{
          .text-overflow-lines(2, 1.75em);
        }
        .tag{
          @lineHeight:18px;
          font-size:14px;
          padding-left:1.6em;
          line-height:@lineHeight;
          &::before{
            font-size:@lineHeight;
          }
        }
        .route-price{
          .price{font-size:30px;}
          .small{font-size:14px;}
        }
      }
    }
  }
}
</style>



